<template>
  <el-image
    :style="{ width, height }"
    fit="contain"
    class="img"
    :src="img_path"
    alt
  >
    <div slot="error" class="image-slot">
      <img src="@/assets/face_404.jpg" alt=""/>
    </div>
  </el-image>
</template>

<script>
import { getImgUrl } from "@/services";
import face_404 from "@/assets/face_404.jpg";
import face_secret from "@/assets/face_secret.png";
import body_secret from "@/assets/body_secret.png";
import vehicle_secret from "@/assets/vehicle_secret.png";
import non_vehicle_secret from "@/assets/non_vehicle_secret.png";
export default {
  props: {
    src: {
      type: String,
      default: "",
    },
    width: {
      type: String,
      default: "160px",
    },
    height: {
      type: String,
      default: "160px",
    },
    type: {
      type:String,
      default:'face'
    }
  },
  data() {
    return {
      img_path: "",
      imgMap:{
        face:face_secret,
        body:body_secret,
        vehicle:vehicle_secret,
        non_vehicle:non_vehicle_secret
      }
    };
  },
  watch: {
    src: {
      async handler(val) {
        if (val) {
          try {
            this.img_path = getImgUrl(val);
          } catch (e) {
            this.img_path = face_404;
          }
        } else {
          this.img_path = this.imgMap[this.type];
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="less" scoped>
// .img {
//   width:160px;
//   height:250px;
// }
/deep/ .image-slot {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
</style>
